import useToggle, { Toggle } from "../hooks/useToggle";
import { FC, ReactNode } from "react";

export type RenderContent = (toggle: Toggle) => ReactNode;
export type RenderTarget = (toggle: Toggle, opened: boolean) => ReactNode;

interface PortalProps {
  content: RenderContent;
  target: RenderTarget;
}

const Portal: FC<PortalProps> = ({ content, target }) => {
  const { opened, toggle } = useToggle();
  return (
    <>
      {target(toggle, opened)}
      {opened && content(toggle)}
    </>
  );
};

export default Portal;
